<!--
 * @Date: 2021-09-02 19:15:21
 * @Author: 陶子
 * @LastEditTime: 2023-06-15 19:27:11
 * @FilePath: \jk_one-stop_pc\src\views\bigView\production\components\feedProcess.vue
 * @pageName: 这是--（生产投料进度）--组件
-->
<template>
  <div class="livenessRoot">
    <div class="topBox">
      <div class="topTitle">
        <img src="~@/assets/img/screen-p1.png" alt="" />
        生产投料进度
      </div>
    </div>
    <div class="lastBox">
      <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="defaultOption" @ScrollEnd="ScrollEnd">
        <div class="itemBox" v-for="item in listData" :key="item.id">
          <div class="itemLeft">
            <div class="mycircle"></div>
            <a-progress
              type="circle"
              :width="70"
              :strokeWidth="6"
              :percent="item.feedingSchedule"
              :strokeColor="checkStockColor(item.feedingSchedule)"
            >
              <template #format="percent">
                <div>
                  <div class="circletext">{{ item.feedingSchedule }}%</div>
                </div>
              </template>
            </a-progress>
          </div>
          <div class="itemRight">
            <div class="rightTop">
              <div class="topLeft">{{ item.goodsName }}-{{ item.orderCode }}</div>
            </div>
            <div class="rightCenter">
              <div class="centerChart" :style="{width: item.feedingSchedule+'%'}"></div>
              <div class="centerBar">
                <div class="barI" v-for="i in 6" :key="i+'xyz'" v-show="showI(item.feedingSchedule, i)"></div>
                <div class="barNum">{{ numFormat(item.producedNum) }}</div>
              </div>
            </div>
            <div class="rightBot">
              <div class="numText" style="margin-right: 0.48rem">
                计划生产<span>{{ numFormat(item.num) }}</span>
              </div>
              <div class="numText">
                已生产<span>{{ numFormat(item.producedNum) }}</span>
              </div>
            </div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>
<script>
import { numFormat } from '@/utils/util'
export default {
  props: ['feedProcessData'],
  data() {
    return {
      listData: [],
      resData: [],
      timer: 1,
      numFormat,
    }
  },
  computed: {
    defaultOption() {
      return {
        step: 0.15, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 0, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  watch: {
    feedProcessData: {
      handler(newVal, oldVal) {
        this.resData = JSON.parse(JSON.stringify(newVal))
        if (this.timer < 3) {
          this.listData = JSON.parse(JSON.stringify(newVal))
          this.resData = []
          this.timer++
        }
        this.$forceUpdate()
      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    showI(num, index) {
      if (!num) {
        return false
      } else {
        let i = index
        return num / (i*14.28) >= 1
      }
    },
    ScrollEnd() {
      if (this.resData.length > 0) {
        this.listData = JSON.parse(JSON.stringify(this.resData))
        this.resData = []
        this.$forceUpdate()
      }
    },
    checkStockColor(colorNum) {
      let numValue = ''
      if (colorNum == 0) {
        numValue = '#D3D3D3'
      } else if (100 > colorNum > 0) {
        numValue = '#4BF3F9'
      } else if (colorNum == 100) {
        numValue = '#39FFBD'
      } else {
        numValue = '#D3D3D3'
      }
      return numValue
    },
  },
}
</script>

<style scoped lang="less">
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.livenessRoot {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0.08rem 0.2rem 0 0.1rem;
  .topBox {
    box-sizing: border-box;
    padding: 0.13rem 0.57rem 0 0;
    width: 100%;
    height: 0.65rem;
    .topTitle {
      font-size: 0.18rem;
      display: flex;
      align-items: center;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #ffffff;
      background: url('~@/assets/img/screen-p2.png') no-repeat;
      background-size: 100% 40%;
      background-position: left bottom;
      img {
        width: 0.53rem;
        height: 0.52rem;
      }
    }
  }
  .lastBox {
    height: calc(100% - 0.72rem);
    div.itemBox {
      box-sizing: border-box;
      padding: 0.3rem 0rem;
      border-bottom: 2px solid;
      border-image: linear-gradient(
          to right,
          rgba(255, 255, 255, 0.1) 0%,
          rgba(255, 255, 255, 0.2) 10%,
          rgba(255, 255, 255, 0.3) 20%,
          rgba(255, 255, 255, 0.4) 30%,
          rgba(255, 255, 255, 0.5) 40%,
          rgba(255, 255, 255, 0.8) 50%,
          rgba(255, 255, 255, 0.5) 60%,
          rgba(255, 255, 255, 0.4) 70%,
          rgba(255, 255, 255, 0.3) 80%,
          rgba(255, 255, 255, 0.1) 90%,
          rgba(255, 255, 255, 0.2) 100%
        )
        2;
      height: 2rem;
      .flex(flex-start,center);
      div.itemLeft {
        margin-right: 0.24rem;
        width: 1.4rem;
        overflow: hidden;
        position: relative;
        .circletext {
          font-size: 0.24rem;
          font-family: Alimama ShuHeiTi;
          font-weight: bold;
          color: #ffffff;
        }
        .mycircle {
          width: 54px;
          height: 54px;
          border: solid 2px #91a9ff;
          border-radius: 50%;
          position: absolute;
          left: 8px;
          top: 8px;
        }
      }

      div.itemRight {
        height: 1.7rem;
        flex: 1;
        .flex(space-between,flex-start,column);
        font-size: 0.18rem;
        color: #ffffff;
        div.rightTop {
          .flex(flex-start,center);
          div.topLeft {
            font-size: 0.18rem;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #ffffff;
          }
          .topCenter {
            margin: 0 3px;
          }
          div.topRight {
            width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        div.rightCenter {
          border: 1px solid #91a9ff;
          height: 0.5rem;
          width: 100%;
          padding: 0.05rem 0.08rem 0.05rem 0.05rem;
          display: flex;
          align-items: center;
          position: relative;
          .centerChart {
            height: 0.3rem;
            display: flex;
            background-image: linear-gradient(to right, rgba(75, 243, 249, 0), rgba(75, 243, 249, 1));
            position: absolute;
            z-index: 1;
          }
          .centerBar {
            width: 100%;
            height: 0.3rem;
            display: flex;
            z-index: 2;
          }
          .barNum {
            height: 0.5rem;
            position: absolute;
            right: 0;
            padding-right: 0.08rem;
            font-size: 0.18rem;
            font-family: Source Han Sans CN;
            font-weight: bold;
            color: #ffffff;
          }
          .barI {
            height: 100%;
            width: 14.28%;
            border-right: 0.1rem solid #011753;
          }
        }

        div.rightBot {
          display: flex;
          .numText {
            font-size: 0.14rem;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
            span {
              font-size: 0.18rem;
              font-family: Source Han Sans CN;
              font-weight: bold;
              color: #4bf3f9;
              margin-left: 0.1rem;
              letter-spacing: 0.02rem;
              text-shadow: 0 0 0.1rem #4bf3f9, 0 0 0.02rem #4bf3f9, 0 0 0 #4bf3f9, 0 0 0 #4bf3f9;
            }
          }
        }
      }
    }
  }
}
.seamless-warp {
  height: 100%;
  overflow: hidden;
}
.processText {
  font-size: 0.14rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}
</style>
<style lang="less">
.seamless-warp {
  height: 100%;
  overflow: hidden;
}

.ant-progress-circle-trail {
  stroke: #888888 !important;
}
</style>
